import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loaddataAction, removeAction} from './store/actionCreator'

const mapStateToProps = (state) => {
  return {
    list: state.list
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    remove(index) {
      dispatch(removeAction(index))
    },
    loadData() {
      dispatch(loaddataAction())
    }
  }
}

class List extends Component {

  handleClick = (index) => {
    return () => {
      this.props.remove(index)
    }
  }
  render() {
    return (
      <ul>
        {
          this.props.list.map((value, index) => {
            return <li key={value.positionId}>{value.positionName}<button onClick={this.handleClick(index)}>remove</button></li>
          })
        }
      </ul>
    )
  }

  componentDidMount() {
    this.props.loadData()
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(List)
